<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="../common/header.jsp"%>

<script type="application/javascript" src="/static/webjars/layui/layui.js"></script>


<div id="saper-container">
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2 class="layui-col-md3">重点人添加</h2>

            <div class="layui-col-md2 layui-btn" style="background-color:#6ec673; float: right;height: 30px;margin-top: 1px;line-height: 30px;width: 60px;margin-right: 10px;margin-left: 2px;" onclick="refresh('keyperson')">
                返回
            </div>
        </div>
    </div>

</div>


<form class="layui-form" id="add-key-person" style="padding-top: 10px">
    <div class="layui-col-md12">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block" >
                <input type="text" name="name" placeholder="必填" required  lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号：</label>
            <div class="layui-input-block" >
                <input type="text" name="tellphone" placeholder="必填" required  lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄：</label>
            <div class="layui-input-block" >
                <input name="born" type="text" placeholder="出生日期" required  lay-verify="required" autocomplete="off" class="layui-input"  />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">民族：</label>
            <div class="layui-input-block">
                <select name="nation" id="nation" lay-filter="nation"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">教育：</label>
            <div class="layui-input-block">
                <select name="education" id="education" lay-filter="education"></select>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="layui-col-md1" style="width: 110px;">
            <label class="layui-form-label">籍贯：</label>
        </div>
        <dlv class="layui-col-md11" style="width: calc(100% - 110px)">
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 0px; min-height: 35px;">
                    <select name="province" lay-filter="province1"></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <select name="city" lay-filter="city1" ></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <select name="county" lay-filter="county1" ></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <select name="town" lay-filter="town1" ></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <select name="village" lay-filter="village" ></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <input type="text" name="address" placeholder="详细地址" required  lay-verify="required" autocomplete="off" class="layui-input" />
                </div>
            </div>
        </dlv>
    </div>
    <div class="layui-col-md12" style="height: 15px;"></div>
    <div class="row">
        <div class="layui-col-md1" style="width: 110px;">
            <label class="layui-form-label">现居地：</label>
        </div>
        <dlv class="layui-col-md11" style="width: calc(100% - 110px);">
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 0px; min-height: 35px;">
                    <select name="province" lay-filter="province2"></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <select name="city" lay-filter="city2" ></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <select name="county" lay-filter="county2" ></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <select name="town" lay-filter="town2" ></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <select name="village" lay-filter="village" ></select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-block" style="display: block; margin-left: 12px; min-height: 35px;">
                    <input type="text" name="address" placeholder="详细地址" required  lay-verify="required" autocomplete="off" class="layui-input" />
                </div>
            </div>
        </dlv>
    </div>
    <div class="layui-col-md12" style="height: 15px;"></div>
    <div class="layui-col-md12">
        <div class="layui-form-item">
            <label class="layui-form-label">关注原因：</label>
            <div class="layui-input-block" >
                <input type="text" name="reason" placeholder="必填" required  lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">当前情况：</label>
            <div class="layui-input-block" >
                <input type="text" name="nowSituation" placeholder="必填" required  lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block" >
                <input type="text" name="remarks" placeholder="" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item layui-upload">
            <label class="layui-form-label layui-btn layui-btn-normal" id="files">选择附件</label>
            <div class="layui-input-block">
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr><th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr></thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="keyperson-form" id="submit">保存</button>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>

</form>


<%@ include file="../common/footer.jsp"%>


<script type="application/javascript">
    $("div").removeClass("iselect-wrapper");
    //时间戳
    var nowtimestamp = (new Date()).getTime();
    var layer = layui.layer;
    var form = layui.form;
    var laydate = layui.laydate;
    var upload = layui.upload;

    laydate.render({
        elem: '#born' //指定元素
    });

    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [ o[this.name] ];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

</script>

<script type="application/javascript">
    var dddd = new Date();
    console.log(dddd.getFullYear() + "-" + dddd.getMonth() + "-" + dddd.getDay());//获取系统当前时间
    initForm();
    function initForm(){
        form.on('select(province1)', function(data){
            $.post("/ajax/pub/getcity",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    document.getElementsByName("city")[0].innerHTML = "";
                    document.getElementsByName("county")[0].innerHTML = "";
                    document.getElementsByName("town")[0].innerHTML = "";
                    document.getElementsByName("village")[0].innerHTML = "";
                    for(i = 0; i < result.length; i++){
                        document.getElementsByName("city")[0].options.add(new Option(result[i].name,result[i].code));
                    }
                    form.render('select');
                }
            );
        });
        form.on('select(province2)', function(data){
            $.post("/ajax/pub/getcity",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    document.getElementsByName("city")[1].innerHTML = "";
                    document.getElementsByName("county")[1].innerHTML = "";
                    document.getElementsByName("town")[1].innerHTML = "";
                    document.getElementsByName("village")[1].innerHTML = "";
                    for(i = 0; i < result.length; i++){
                        document.getElementsByName("city")[1].options.add(new Option(result[i].name,result[i].code));
                    }
                    form.render('select');
                }
            );
        });
        form.on('select(city1)', function(data){
            $.post("/ajax/pub/getcounty",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    document.getElementsByName("county")[0].innerHTML = "";
                    document.getElementsByName("town")[0].innerHTML = "";
                    document.getElementsByName("village")[0].innerHTML = "";
                    for(i = 0; i < result.length; i++){
                        document.getElementsByName("county")[0].options.add(new Option(result[i].name,result[i].code));
                    }
                    form.render('select');
                }
            );
        });
        form.on('select(city2)', function(data){
            $.post("/ajax/pub/getcounty",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    document.getElementsByName("county")[1].innerHTML = "";
                    document.getElementsByName("town")[1].innerHTML = "";
                    document.getElementsByName("village")[1].innerHTML = "";
                    for(i = 0; i < result.length; i++){
                        document.getElementsByName("county")[1].options.add(new Option(result[i].name,result[i].code));
                    }
                    form.render('select');
                }
            );
        });
        form.on('select(county1)', function(data){
            $.post("/ajax/pub/gettown",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    document.getElementsByName("town")[0].innerHTML = "";
                    document.getElementsByName("village")[0].innerHTML = "";
                    for(i = 0; i < result.length; i++){
                        document.getElementsByName("town")[0].options.add(new Option(result[i].townName,result[i].townId));
                    }
                    form.render('select');
                }
            );
        });
        form.on('select(county2)', function(data){
            $.post("/ajax/pub/gettown",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    document.getElementsByName("town")[1].innerHTML = "";
                    document.getElementsByName("village")[1].innerHTML = "";
                    for(i = 0; i < result.length; i++){
                        document.getElementsByName("town")[1].options.add(new Option(result[i].townName,result[i].townId));
                    }
                    form.render('select');
                }
            );
        });
        form.on('select(town1)', function(data){
            console.log(data.value);
            $.post("/ajax/pub/getvillage",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    document.getElementsByName("village")[0].innerHTML = "";
                    for(i = 0; i < result.length; i++){
                        document.getElementsByName("village")[0].options.add(new Option(result[i].villageName,result[i].villageName));
                    }
                    form.render('select');
                }
            );
        });
        form.on('select(town2)', function(data){
            console.log(data.value);
            $.post("/ajax/pub/getvillage",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    document.getElementsByName("village")[1].innerHTML = "";
                    for(i = 0; i < result.length; i++){
                        document.getElementsByName("village")[1].options.add(new Option(result[i].villageName,result[i].villageName));
                    }
                    form.render('select');
                }
            );
        });


        form.on('submit(keyperson-form)', function(data){
            data = $("#add-key-person").serializeObject();
            data.time = dddd.getFullYear() + "-" + dddd.getMonth() + 1 + "-" + dddd.getDate();
            data.time = dddd.toLocaleString();

            layer.msg("提交中");
            data.province[0] = $("select[lay-filter=province1] option:selected").text();
            data.city[0] = $("select[lay-filter=city1] option:selected").text();
            data.county[0] = $("select[lay-filter=county1] option:selected").text();
            data.town[0] = $("select[lay-filter=town1] option:selected").text();
            data.village[0] = $("select[lay-filter=village1] option:selected").text();

            data.province[1] = $("select[lay-filter=province2] option:selected").text();
            data.city[1] = $("select[lay-filter=city2] option:selected").text();
            data.county[1] = $("select[lay-filter=county2] option:selected").text();
            data.town[1] = $("select[lay-filter=town2] option:selected").text();
            data.village[1] = $("select[lay-filter=village2] option:selected").text();

            data.nativePlace = "" + data.province[0] + "-" + data.city[0] + "-" + data.county[0] + "-" + data.town[0] + "-" + data.village[0] + "-" + data.address[0];
            data.nowPlace = "" + data.province[1] + "-" + data.city[1] + "-" + data.county[1] + "-" + data.town[1] + "-" + data.village[1] + "-" + data.address[1];
            console.log(data);
            $.ajax({
                url: "/ajax/save/keyperson",
                type: "POST",
                contentType : 'application/json;charset=utf-8',
                //设置请求头信息
                dataType:"json",
                data: JSON.stringify(data),
                success: function(data){
                    layer.msg(data.code);
                    nowtimestamp = (new Date()).getTime();
                    form.render();
                },
                error: function(res){
                    layer.msg(res);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    }
</script>

<script type="application/javascript">
    //获取国家省份信息
    getProvince("CN","a","ad");
    getEducation();
    getNation();
    function getProvince(code){
        $.post("/ajax/pub/getprovince",{code: code},
            function (result) {
                for(i = 0; i < result.length; i++){
                    document.getElementsByName("province")[0].options.add(new Option(result[i].name,result[i].code));
                    document.getElementsByName("province")[1].options.add(new Option(result[i].name,result[i].code));
                }
                form.render('select');
            }
        );

    }
    function getNation(){
        $.post("/ajax/pub/getnation",{},
            function (result) {
                for(i = 0; i < result.length; i++){
                    document.getElementsByName("nation")[0].options.add(new Option(result[i].name,result[i].name));
                }
                form.render('select');
            }
        );
    }
    function getEducation(){
        $.post("/ajax/pub/geteducation-degree",{},
            function (result) {
                for(i = 0; i < result.length; i++){
                    document.getElementsByName("education")[0].options.add(new Option(result[i].name,result[i].name));
                }
                form.render('select');
            }
        );
    }
</script>

<%--//文件上传--%>
<script type="application/javascript">
    // //允许上传的文件类型

    //多文件列表
    var demoListView = $('#demoList')
        ,uploadListIns = upload.render({
        elem: '#files'
        ,url: '/api/spfile/upload'
        ,data: {
            tableName: '重点人员表',
            index: nowtimestamp
        }
        ,accept: 'file'
        // ,acceptMime: filetype
        ,multiple: true
        // ,number: 4
        ,auto: false
        ,bindAction: '#submit'
        ,choose: function(obj){
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">'
                    ,'<td>'+ file.name +'</td>'
                    ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                    ,'<td>等待上传</td>'
                    ,'<td>'
                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    ,'</td>'
                    ,'</tr>'].join(''));

                //单个重传
                tr.find('.demo-reload').on('click', function(){
                    obj.upload(index, file);
                });

                //删除
                tr.find('.demo-delete').on('click', function(){
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });
                demoListView.append(tr);
            });
        }
        ,done: function(res, index, upload){
            if(res.code == 0){ //上传成功
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(3).html(''); //清空操作
                return delete this.files[index]; //删除文件队列已经上传成功的文件
            }else if(res.code == -1) {
                // layer.msg("文件类型不支持");
            }
            this.error(res, index, upload);
        }
        ,error: function(res, index, upload){
            var tr = demoListView.find('tr#upload-'+ index)
                ,tds = tr.children();
            if(res.code == -1){
                tds.eq(2).html('<span style="color: #FF5722;">文件类型不支持</span>');
            }else {
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            }
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });
</script>

<script type="application/javascript">
    function timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D+h+m+s;
    }
</script>
